<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/clock.css">
</head>

<body>

    <div class="clock">
        <span id="hEL">
            <img id="h1" src="./imgs/countdown0.png" alt="">
            <img id="h2" src="./imgs/countdown1.png" alt="">
        </span>
        <span class="dot">
            <img src="./imgs/dot.png" alt="">
        </span>
        <span id="mEL">
            <img id='m1' src="./imgs/countdown2.png" alt="">
            <img id="m2" src="./imgs/countdown2.png" alt="">
        </span>
        <span class="dot">
            <img src="./imgs/dot.png" alt="">
        </span>
        <span id="sEL">
            <img id="s1" src="./imgs/countdown3.png" alt="">
            <img id="s2" src="./imgs/countdown0.png" alt="">
        </span>
    </div>
    <script>
        function clock() {

            const hEL = document.getElementById('hEL');
            const mEL = document.getElementById('mEL');
            const sEL = document.getElementById('sEL');
            setInterval(() => {
                const date = new Date();
                let h = date.getHours();
                let m = date.getMinutes();
                let s = date.getSeconds();
                h = String(h).length === 1 ? '0' + h : h
                m = String(m).length === 1 ? '0' + m : m;
                s = String(s).length === 1 ? '0' + s : s;

                [h1.src, h2.src] = String(h).split('').map((num) => {
                    return `./imgs/countdown${num}.png`
                });
                [m1.src, m2.src] = String(m).split('').map((num) => {
                    return `./imgs/countdown${num}.png`
                });
                [s1.src, s2.src] = String(s).split('').map((num) => {
                    return `./imgs/countdown${num}.png`
                });
            }, 1000);
        }

        clock();
    </script>
</body>

</html>